<template>
  <div class="container">
    <column-list :list="list"></column-list>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import ColumnList, { ColumnProps } from './components/ColumnList.vue'
const textData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    avatar: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=tupian1&hs=2&pn=12&spn=0&di=75790&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3858343162%2C3540634852&os=1539123998%2C2809102778&simid=4280074468%2C713642401&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=tupian1&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fwww.tupian1.cn%2Fuploads%2Fallimg%2F151203%2F1-151203000202-50.jpg%26refer%3Dhttp%3A%2F%2Fwww.tupian1.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1618039571%26t%3D0268b239e84d2e1d0f70798f6ce9d99d&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bp7rtwg8_z%26e3BvgAzdH3Fiw5hwgAzdH3F1wq7wgAzdH3F17tx7j6jg_z%26e3Bip4s&gsm=2&islist=&querylist=',
    description: '这是test1的专栏， 有一段非常有意思的简介，可以更新一下噢'
  },
  {
    id: 2,
    title: 'test2的专栏',
    avatar: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=tupian1&hs=2&pn=12&spn=0&di=75790&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3858343162%2C3540634852&os=1539123998%2C2809102778&simid=4280074468%2C713642401&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=tupian1&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fwww.tupian1.cn%2Fuploads%2Fallimg%2F151203%2F1-151203000202-50.jpg%26refer%3Dhttp%3A%2F%2Fwww.tupian1.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1618039571%26t%3D0268b239e84d2e1d0f70798f6ce9d99d&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bp7rtwg8_z%26e3BvgAzdH3Fiw5hwgAzdH3F1wq7wgAzdH3F17tx7j6jg_z%26e3Bip4s&gsm=2&islist=&querylist=',
    description: '这是test1的专栏， 有一段非常有意思的简介，可以更新一下噢'
  },
  {
    id: 3,
    title: 'test3的专栏',
    avatar: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=tupian1&hs=2&pn=12&spn=0&di=75790&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3858343162%2C3540634852&os=1539123998%2C2809102778&simid=4280074468%2C713642401&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=tupian1&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fwww.tupian1.cn%2Fuploads%2Fallimg%2F151203%2F1-151203000202-50.jpg%26refer%3Dhttp%3A%2F%2Fwww.tupian1.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1618039571%26t%3D0268b239e84d2e1d0f70798f6ce9d99d&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bp7rtwg8_z%26e3BvgAzdH3Fiw5hwgAzdH3F1wq7wgAzdH3F17tx7j6jg_z%26e3Bip4s&gsm=2&islist=&querylist=',
    description: '这是test1的专栏， 有一段非常有意思的简介，可以更新一下噢'
  }
]

export default defineComponent({
  name: 'App',
  components: {
    ColumnList
  },
  setup () {
    return {
      list: textData
    }
  }
})
</script>

<style>

</style>
